body{margin:0;user-select:none;width:1920px;height:1080px;overflow:hidden;transform-origin:left top;position:absolute}#background{width:100%;height:100%;background-size:100% 100%}.logo-home{position:absolute;width:302px;height:70px;top:5%;right:3%}#home{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center}.title-img{width:716px;height:139px}.home-title{width:100%;height:70%}#menu-bar,.home-title{display:flex;align-items:center;justify-content:center}#menu-bar{width:min-content;height:500px;flex-direction:column;gap:40px}.menu-button{width:350px;height:100px;border-radius:60px;font-size:64px;font-weight:600;background-color:#fdd300;font-family:sans-serif;border:5px solid #fff;align-items:center;display:flex;justify-content:center}.button{border-radius:20px;border:2px solid #000;padding:10px 20px}#button-home{width:100px;object-fit:contain;position:fixed;left:3%;bottom:2%}#explain{width:100%;height:100%;align-items:center}#explain,#explain-area{display:flex;flex-direction:column;justify-content:flex-start}#explain-area{position:relative;height:550px;width:1270px;align-items:flex-start;font-size:48px;font-family:sans-serif;background-size:100% 100%;background-repeat:no-repeat;margin-top:9%;padding:50px}.explain-position{position:absolute;top:0;left:37%;transform:translateY(-50%)}.explain-title{font-size:54px;font-weight:600;margin:0;text-decoration:underline #ea6000;text-underline-offset:10px}.sub-content{display:grid;grid-template-columns:1fr 5fr;margin-left:2%}.explain-button{display:flex;height:min-content;width:min-content;align-self:center}#game{display:flex;width:100%;height:100%;flex-direction:column;align-items:center}.game-title{margin:5% 0 3%}.card-selected{display:flex;width:100%;justify-content:center;gap:15px}.single-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-items:center}.card-type{padding:20px 15px;border:5px solid #fff;border-radius:30px;font-size:52px;width:220px;text-align:center;color:#fff}.cover-card{margin-left:20px;width:300px;object-fit:contain;cursor:pointer}.card-area{position:relative;display:flex;margin:15% 0 0}.select-card{position:absolute;width:max-content;left:50%;top:10%;padding:5px;transform:translate(-50%);background-color:hsla(0,0%,100%,.5333333333333333);font-size:32px;font-weight:600;pointer-events:none}#clear-card{position:fixed;background-color:#efe93b;font-size:48px;bottom:3%;right:15%;font-weight:600;padding:15px 5px;border:5px solid #fff;border-radius:20px}.turn-back{transform:rotateY(180deg)}.turn-front{transform:rotateY(0deg)}#card{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;background-size:100% 100%}.card-title{display:flex;width:max-content;justify-content:center;color:#fff;border:5px solid #fff;font-size:48px;padding:10px 50px;border-radius:20px}.card-content{display:grid;width:80%;justify-content:center;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr)}#show-card{position:absolute;top:50%;left:50%}.back-card,.front-card{position:absolute;top:50%;left:50%;translate:-50% -50%;backface-visibility:hidden}.back-card{transform:rotateY(-180deg)}.rotate-front-card{transform:rotateY(180deg);transition:.5s ease-in-out}.rotate-back-card{transform:rotateY(0deg);transition:.5s ease-in-out}.card-item{width:90%;cursor:pointer}#close-button{width:100px;height:100px;position:fixed;top:3%;left:3%}